<template>
  <div id="category">
    <nav-bar class="top-bar">
      <h3 slot="center">分类</h3>
    </nav-bar>
    <div class="categoryinfo">
      <category-nav
        :category-titles="categoryTitles"
        @itemClick="itemClick"
      ></category-nav>
      <category-goods :categorygoods="categorygoods"></category-goods>
    </div>
  </div>
</template>

<script>
// 导入网络请求模块
import { getCategoryNav, getCategoryGoods } from "network/category/category";
// 导入子组件
import CategoryNav from "./childComps/CategoryNav.vue";
import NavBar from "../../components/common/navbar/NavBar.vue";
import CategoryGoods from "./childComps/CategoryGoods.vue";

export default {
  name: "Categories",
  components: {
    CategoryNav,
    NavBar,
    CategoryGoods,
  },
  data() {
    return {
      categoryTitles: [], //分类导航标题数据
      categorygoods: [],
    };
  },

  // 生命周期函数 发送网络请求 获取导航标题
  created() {
    getCategoryNav().then((res) => {
      // console.log(res);
      this.categoryTitles = res.data.data.category.list;
      this.getCategoryItem(this.categoryTitles[0].maitKey);  // 默认获取第一个分类的内容
    });
    
  },
  methods: {
    itemClick(maitKey) { 
      this.getCategoryItem(maitKey); 
    },
    getCategoryItem(maitKey){ //自定义函数包裹网络请求函数 传递参数
      getCategoryGoods(maitKey).then((res) => {// 网络请求函数
        // console.log(res);
        this.categorygoods = res.data.data.list;
      });
    }
  },
};
</script>

<style scoped>
#category {
  position: fixed;
  left: 0;
  right: 0;
}
.top-bar {
  background: var(--color-tint);
  color: #fff;
}
.categoryinfo {
  display: flex;
}
</style>
